<template>
  <div class="car-container flex-column">
    <Filtering
      :filters="filters"
      :inline="true"
      class="mt-30"
      @onFilter="handleFilter"
      @reset="reset"
    />
    <div class="flex mt-20 mb-10">
      <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd">新增</el-button>
      <el-button v-waves type="danger" plain icon="el-icon-delete-solid" size="small" @click="handleDelte">删除</el-button>
      <el-button class="ml-10" @click="handleImport">导入</el-button>
    </div>

    <Table
      :page-data="pageData"
      :table-data="tableData"
      @selection-change="handleSelectionChange"
      @pagination="getList"
    >
      <template #action="slotInfoProps">
        <el-button
          type="text"
          size="medium"
          @click="handleEdit(slotInfoProps.info.row)"
        >编辑</el-button>
        <Confirm
          @onConfirm="handleConfirm(slotInfoProps.info.row)"
        />
      </template>
    </Table>

    <dialog-tpl class="form-dialog" :dialog-config="carDialogConfig">
      <template #dialogContent>
        <component
          :is="carDialogConfig.componentTag"
          :dialog-config="carDialogConfig"
          :config="config"
          @reload="getList"
        ></component>
      </template>
    </dialog-tpl>

  </div>
</template>

<script>
import UploadBtn from '@/components/upload-btn'
import CarAddEdit from './car-add-edit'
import Enterprise from '@/services/enterprise.js'
import UploadFile from '@/components/form/uploadFile'
export default {
  components: {
    UploadBtn,
    CarAddEdit,
    UploadFile
  },
  props: {
    dialogConfig: {
      type: Object,
      default () {
        return {
          show: false,
          title: '标题',
          width: '30%',
          data: {}
        }
      }
    }
  },
  data () {
    return {
      config: {
        tips: '下载企业车辆导入模版表格',
        tipUrl: `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}/plugin/企业车辆导入模板.xls`,
        urlName: 'enterpriseImport'
      },
      filters: [
        {
          type: 'input',
          label: '企业名称',
          value: '',
          placeholder: '请输入企业名称',
          disabled: true,
          style: 'width: 220px;margin-right: 30px'
        },
        {
          type: 'input',
          label: '车牌号',
          value: '',
          placeholder: '请输入车牌号'
        },
      ],
      pageData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      tableData: {
        columns: [
          { label: '车牌号', prop: 'plate' },
          { label: '车主姓名', prop: 'owner' },
          { label: '联系方式', prop: 'phone' },
          { label: '添加时间', prop: 'createTime' },
          { label: '操作', prop: 'action', slot: true, width: 120 },
        ],
        data: [
        ],
        config: {
          index: false,
          selection: true
        }
      },
      selectionData: [],
      carDialogConfig: {
        append: true,
        show: false,
        title: '企业车新增',
        width: '42%',
        data: {},
        componentTag: 'CarAddEdit'
      }
    }
  },
  computed: {
    searchParmas () {
      const [companyName,
        plate,] = this.filters.map(i => i.value)
      return {
        companyName, plate, companyId: this.dialogConfig.data.id
      }
    }
  },
  watch: {
    'dialogConfig.show': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.filters[0].value = this.dialogConfig.data.companyName
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleImport () {
      this.carDialogConfig = {
        append: true,
        show: true,
        title: '企业车辆导入',
        width: '30%',
        data: {},
        componentTag: 'UploadFile'
      }
    },
    handleFilter () {
      this.pageData.page = 1
      this.getList()
    },
    getList () {
      const { page: pageNum, pageSize} = this.pageData
      Enterprise.carList({ ...this.searchParmas, pageNum,pageSize}).then(res => {
        const { rows: tableData, total } = res
        this.tableData = {
          ...this.tableData,
          data: tableData
        }
        this.pageData = {
          ...this.pageData,
          total
        }
      })
      this.$emit('reload')
    },
    reset () {
      this.filters = this.filters.map(i => ({...i,value: ''}))
      this.getList()
    },
    handleSelectionChange (val) {
      this.selectionData = val
    },
    handleAdd () {
      this.carDialogConfig = {
        append: true,
        show: true,
        title: '企业车新增',
        width: '42%',
        type: 'add',
        data: {companyId: this.dialogConfig.data.id},
        componentTag: 'CarAddEdit'
      }
    },
    handleDelte () {
      if (!this.selectionData.length) {
        this.$message.warning('请至少勾选一条数据进行操作')
        return
      }
      this.$confirm('是否删除选中项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectionData.map(i => i.id).join() || ''
        this.handleDel(ids)
      }).catch(() => {})
    },
    handleDel (ids) {
      Enterprise.carDel(ids).then(res => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    handleEdit (row = {}) {
      this.carDialogConfig = {
        append: true,
        show: true,
        title: '企业车编辑',
        width: '42%',
        type: 'edit',
        data: {...row },
        componentTag: 'CarAddEdit'
      }
    },
    handleConfirm (row = {}) {
      this.handleDel(row.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.car-container{
  height: 600px;
}
</style>

